<template>
    <div>
        <van-sticky>
            <van-nav-bar title="个人信息" left-text="返回" left-arrow @click-left="onClickLeft" />
        </van-sticky>
        <div class="onload">
            <!-- <van-uploader :after-read="afterRead" >
                <van-button icon="plus" type="primary">上传文件</van-button>
            </van-uploader> -->
            <div class="onloadHead">
                上传头像
            </div>
        </div>
        <div class="tab">
            <van-field v-model="nickName" label="昵称" />

            <van-field v-model="sex" type="text" label="性别" />

            <van-field v-model="phonenumber" type="tel" label="电话号码" />

            <van-field v-model="idCard" type="number" label="证件号" />
        </div>
        <div class="submit">
            <div class="sub" @click="submit">
                提交
            </div>
        </div>
    </div>
</template>
<script>
import nav from "@/mixin/nav";
import { userInfo, userUpdate, userUpload } from "@/service/user/userLogin";
export default {
    mixins: [nav],
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        async submit() {
            let { data } = await userUpdate({
                sex: this.sex == "男" ? "0" : "1",
                nickName: this.nickName,
                phonenumber: this.phonenumber,
                idCard: this.idCard
            })
            console.log(data);
            if (data.code == 200) {
                this.$toast.success("修改成功");
                this.$router.push("/mine");
            } else {
                this.$toast.fail(data.msg);
            }
        },
        async afterRead(file) {
            console.log(file);
            let { data } = await userUpload(file.content);
            console.log(data);
            console.log(this.HeadImg);
        }
    },
    async created() {
        let { data } = await userInfo();
        console.log(data);
        this.sex = data.user.sex == "0" ? "男" : "女";
        this.nickName = data.user.nickName;
        this.phonenumber = data.user.phonenumber;
        this.idCard = data.user.idCard;
    },
    data() {
        return {
            sex: '',
            nickName: '',
            phonenumber: '',
            idCard: '',
        };
    },
}

</script>
<style scoped lang="scss">
.onload {
    height: 200px;
    background-color: #FAFAFA;
    position: relative;

    .onloadHead {
        position: absolute;
        left: 50%;
        bottom: 30px;
        margin-left: -100px;
        border: 1px solid gray;
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 10px;
        background-color: #fff;
    }

}

.submit {
    width: 100%;
    padding: 0 20px;

    .sub {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin-top: 50px;
        color: #fff;
        border-radius: 5px;
        background-color: #007AFD;
    }
}
</style>